<template>
<div id="goods-list">
  <el-aside style="text-align: left;">
    <span style=" cursor: pointer;margin-bottom: 5px" @click="queryList()">全部</span>
    <el-tree :data="classifyList" node-key="lid" default-expand-all :expand-on-click-node="false" @node-click="queryList">
    </el-tree>
  </el-aside>
  <el-main>
    <div style="margin-bottom: 20px;text-align: right;">
      <el-button style="font-size: 20px;padding: 3px;" :type="showType=='tabel'?'primary':''" size="small" icon="el-icon-bank-card" @click="showType='tabel'"></el-button>
      <el-button style="font-size: 20px;padding: 3px;" :type="showType=='grid'?'primary':''" size="small" icon="el-icon-s-grid" @click="showType='grid'"></el-button>
    </div>
    <el-table :data="goodsList.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))" style="width: 100%" v-if="showType=='tabel'">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item v-if="props.row.photoUrls" style="width:100%;">
              <el-image style="width: 100px; height: 100px" v-for="url in props.row.photoUrls" :key="url" :src="url" :preview-src-list="props.row.photoUrls">
              </el-image>
            </el-form-item>
            <el-form-item label="商品名称">
              <span>{{ props.row.name }}</span>
            </el-form-item>
            <el-form-item label="发布人">
              <span>{{ props.row.belonger }}</span>
            </el-form-item>
            <el-form-item label="联系方式">
              <span>{{ props.row.contact }}</span>
            </el-form-item>
            <el-form-item label="原价">
              <span style="text-decoration:line-through">{{ props.row.originalPrice }}</span>
            </el-form-item>
            <el-form-item label="现价">
              <span>{{ props.row.price }}</span>
            </el-form-item>
            <el-form-item label="购买时间">
              <span>{{ props.row.buyTime | timestamp('yyyy-MM')}}</span>
            </el-form-item>
            <el-form-item label="分类">
              <span>{{ props.row.classify | classify(classifyList)}}</span>
            </el-form-item>
            <el-form-item label="发布时间">
              <span>{{ props.row.createTime | timestamp('yyyy-MM-dd hh:mm')}}</span>
            </el-form-item>
            <el-form-item label="描述" style="width:100%;">
              <span>{{ props.row.desc}}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="商品名称" prop="name" width="250">
        <template slot-scope="scope">
          <el-badge :value="'结束'" class="item" v-if="scope.row.state=='1'">
            <span>{{ scope.row.name }}</span>
          </el-badge>
          <span v-if="scope.row.state!='1'">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="价格" prop="price"></el-table-column>
      <el-table-column label="折扣" prop="discount">
        <template slot-scope="scope">
          <el-tag type="success">{{scope.row.discount}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="发布人" prop="belonger"></el-table-column>
      <el-table-column align="right" width="200">
        <template slot="header" slot-scope="scope">
          <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
        </template>
        <template slot-scope="scope" v-if="currentUserId==scope.row.createrId">
          <el-button size="mini" @click="completion(scope.row)" v-if="scope.row.state!='1'">完成交易</el-button>
          <el-button size="mini" type="danger" @click="deleteGoods(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row v-if="showType=='grid'">
      <el-col :span="6" v-for="goods in goodsList" :key="goods.id" style="padding:8px;">
        <el-card :body-style="{ padding: '10px' }">
          <el-image :src="goods.photoUrls?goods.photoUrls[0]:''" :preview-src-list="goods.photoUrls" class="goods-photo">
          </el-image>
          <div style="padding: 14px;">
            <span>{{goods.name}}</span>
            <div class="bottom clearfix">
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </el-main>
</div>
</template>

<script>
import _ from 'lodash';
import http from '@/components/service/http.js'

export default {
  name: 'goodsList',
  data() {
    return {
      currentUserId: '',
      showType: 'tabel',
      search: '',
      goodsList: [],
      classifyList: []
    }
  },
  created() {
    this.currentUserId = this.$store.state.userId
    this.getClassifyList();
    this.queryList();
  },
  methods: {
    getClassifyList: function () {
      var This = this;
      http.get('/shs/classify/getList')
        .then(function (response) {
          This.classifyList = response.data;
        })
    },
    getList: function (classifyId) {
      var This = this;
      var queryParams = {
        classifyId: ""
      }
      if (classifyId) {
        queryParams.classifyId = classifyId
      }
      http.post('/shs/goods/getList', queryParams)
        .then(function (response) {
          This.goodsList = response.data;
          _.forEach(This.goodsList, function (goods) {
            goods.discount = _.ceil((10 * goods.price / goods.originalPrice), 2) + '折';
            if (goods.photoIds) {
              goods.photoUrls = [];
              _.forEach(goods.photoIds, function (photoId) {
                goods.photoUrls.push('/shs/photo/find/' + photoId)
              })
            }
          })
        })
    },
    queryList: function (data) {
      this.search = '';
      if (data) {
        this.getList(data.lid);
      } else {
        this.getList();
      }
    },
    completion: function (goods) {
      var This = this;
      http.post('/shs/goods/completion', {
          id: goods.id
        })
        .then(function () {
          This.$message({
            showClose: false,
            message: "完成交易",
            type: "success",
            duration: 3000,
            center: true
          });
          This.getList();
        })
    },
    deleteGoods: function (goods) {
      var This = this;
      This.axios.post('/shs/goods/delete', {
          id: goods.id
        })
        .then(function () {
          This.$message({
            showClose: false,
            message: "删除成功",
            type: "success",
            duration: 3000,
            center: true
          });
          This.getList();
        })
    }
  }
}
</script>

<style>
#goods-list {
  width: 100%;
}

#goods-list .el-aside {
  width: 200px !important;
  float: left;
}

#goods-list .el-main {
  width: calc(100% - 200px);
  float: right;
  padding-top: 0;
}

#goods-list label {
  width: 90px;
  color: #99a9bf;
}

#goods-list .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

#goods-list .goods-photo {
  width: 90%;
  height: 200px;
  margin: 20px 0;
}

#goods-list .el-table .cell {
  overflow: unset;
}
</style>
